<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>班级管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css"  media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="activityReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="statusSearch" lay-search="">
                    <option value="">选择状态</option>
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" id="searchContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
            <button type="button" class="layui-btn" data-method="addClass">新增班级</button>
        </div>
    </div>
</form>
<table id="classList" lay-filter="classList" ></table>
<!--添加社团成员页面-->
<div id="addClassDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="classAdd" lay-filter="classAdd">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">院系</label>
            <div class="layui-input-inline">
                <input type="text" name="faculty" autocomplete="off" placeholder="请输入院系" lay-verify="required"
                       lay-reqtext="请输入院系" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-inline">
                <input type="text" name="major" autocomplete="off" placeholder="请输入专业" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班级名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入班级名称" lay-verify="required"
                       lay-reqtext="请输入班级名称" class="layui-input">
            </div>
        </div>

    </form>
</div>
<!--修改社团成员页面-->
<div id="modifyActivityDiv" style="display: none;">
    <form class="layui-form layui-form-pane" id="activityModify" lay-filter="activityModify">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">院系</label>
            <div class="layui-input-inline">
                <input type="text" name="faculty" autocomplete="off" placeholder="请输入院系" lay-verify="required"
                       lay-reqtext="请输入院系" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-inline">
                <input type="text" name="major" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班级名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入班级名称" lay-verify="required"
                       lay-reqtext="请输入班级名称" class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="showActivityReject" style="display: none">
    <div class="layui-input-inline" style="width: 100%;height: 100%;">
        <textarea readonly id="aReason" name="rejectReason" class="layui-textarea"></textarea>
    </div>
</div>
</body>
<script type="text/html" id="comBar">
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="close">禁用</a>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="open">启用</a>
    {{#  } }}
</script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table','form','layer','jquery','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        //获取社团数据
        table.render({
            elem: '#classList'
            ,height: 485
            ,url: '/class' //数据接口
            ,request:{
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                countName: 'total'
            }
            ,page: true //开启分页
            ,totalRow:true
            ,cellMinWidth: 70
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'faculty', title: '院系',align:'center'}
                ,{field: 'major', title: '专业', align:'center'}
                ,{field: 'name', title: '班级名称' ,align:'center',sort:true}
                ,{field: 'status', title: '状态', sort: true,align:'center',templet:'#status'}
                ,{title:'操作',toolbar:'#comBar',width:230}
            ]],
            id:'classTable'
        });
        //监听工具条
        table.on('tool(classList)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if(layEvent === 'close'){ //删除
                layer.confirm('是否禁用'+data.name,{icon: 3, title:'温馨提示：谨慎操作'}, function(index){
                    //发送服务端
                    data.status = '1';
                    $.ajax({
                        url:'/class',
                        type:'post',
                        data:"id="+data.id+"&status="+data.status,
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//禁用成功
                                layer.msg('禁用成功', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'open'){
                layer.confirm('是否启用'+data.name,{icon: 3, title:'温馨提示：谨慎操作'}, function(index){
                    //发送服务端
                    data.status = '0';
                    $.ajax({
                        url:'/class',
                        type:'post',
                        data:"id="+data.id+"&status="+data.status,
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//启用
                                layer.msg('启用成功', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//禁用失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
        //添加活动
        var active = {
            addClass: function () {//添加班级
                layer.open({
                    type: 1,
                    title:["添加班级", 'font-size:14px; font-weight: 700;'],
                    btn:['确认添加','取消添加'],
                    btnAlign: 'c',
                    content: $('#addClassDiv'),
                    area: ['400px','300px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#classAdd").serialize();
                        $.ajax({
                            type:'post',
                            url:'/class',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('添加成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            },
            reload: function(){
                var activityReload = $('#activityReload'); //获取输入框的id
                var statue = $('#statusSearch');
                //执行重载
                table.reload('classTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: activityReload.val(),
                        status: statue.val()
                    }
                }, 'data');
            }
        }

        $('#searchContent .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#searchContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期
        laydate.render({
            elem: '#adate1',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate2',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate3',
            type:'datetime'
        });
        laydate.render({
            elem: '#adate4',
            type:'datetime'
        });
    });
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 0){ }}
    正常
    {{#  } else if(d.status == 1 ) { }}
    禁用
    {{#  }
    }}
</script>
</html>